    <template>
    <div class="ChCompetition">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title" style="color:#fff;">北京PK拾</h1>
            <mt-button icon="more" slot="right" class=" mui-pull-right" style="    background: #d51313; color:#fff; box-shadow:none" @click=buttom>
            </mt-button>
        </header>
        <div class="Chheader">
            <div class="Chhome">
                <div class="ChhomeOne">
                    <img src="../../img/Game/重庆时时彩图标.png" alt=""> 第 20180326095 期
                    <span>03-26</span>
                    <span class="m_right5">截至投注</span>
                </div>
                <div class="ChhomeTwo">00:06:59</div>
                <div class="ChhomeThere"> 第 20180326095 期
                    <span class="number">4&nbsp;4&nbsp;0&nbsp;9&nbsp;1</span>
                    <span class="font" @click=xiangqi>
                        <span>详情</span><img src="../../img/Game/下拉.png" alt=""></span>
                </div>
                <div class="Ch" style="display:none">
                    <div class="ChhomeThere"> 第 20180326095 期
                        <span class="number">4&nbsp;4&nbsp;0&nbsp;9&nbsp;1</span>
                        <span class="font" style="    width: 0.9rem;">
                        </span>
                    </div>
                    <div class="ChhomeThere"> 第 20180326095 期
                        <span class="number">4&nbsp;4&nbsp;0&nbsp;9&nbsp;1</span>
                        <span class="font" style="    width: 0.9rem;">
                        </span>
                    </div>
                    <div class="ChhomeThere"> 第 20180326095 期
                        <span class="number">4&nbsp;4&nbsp;0&nbsp;9&nbsp;1</span>
                        <span class="font" style="    width: 0.9rem;">
                        </span>
                    </div>
                    <div class="ChhomeThere"> 第 20180326095 期
                        <span class="number">4&nbsp;4&nbsp;0&nbsp;9&nbsp;1</span>
                        <span class="font" style="    width: 0.9rem;">
                        </span>
                    </div>

                </div>
            </div>
        </div>
        <div class="category clearfix">
            <!-- 左边 -->
            <div class="left">
                <ul style="padding:0 ;margin:0">
                    <li v-for="(item,i) in left" :key=item class=list :class="{active: i==is}" @click="number1(i)">
                        <div :id="'d'+i" class="redround " style="opacity:0"></div>
                        <span> {{item}}</span>
                    </li>
                </ul>

            </div>
            <diyiqiu v-show="is==0" @length=length :enpty="empt" :titlename="'冠军'"></diyiqiu>
            <diyiqiu v-show="is==1" @length=length :enpty="empt" :titlename="'亚军'"></diyiqiu>
            <diyiqiu v-show="is==2" @length=length :enpty="empt" :titlename="'季军'"></diyiqiu>
            <diyiqiu v-show="is==3" @length=length :enpty="empt" :titlename="'第四名'"></diyiqiu>
            <diyiqiu v-show="is==4" @length=length :enpty="empt" :titlename="'第五名'"></diyiqiu>
            <diyiqiu v-show="is==5" @length=length :enpty="empt" :titlename="'第六名'"></diyiqiu>
            <diyiqiu v-show="is==6" @length=length :enpty="empt" :titlename="'第七名'"></diyiqiu>
            <diyiqiu v-show="is==7" @length=length :enpty="empt" :titlename="'第八名'"></diyiqiu>
            <diyiqiu v-show="is==8" @length=length :enpty="empt" :titlename="'第九名'"></diyiqiu>
            <diyiqiu v-show="is==9" @length=length :enpty="empt" :titlename="'第十名'"></diyiqiu>
            <longhu v-show="is==10" @length=length :enpty="empt"></longhu>
            <div class="mint-msgbox-wrapper" style="position: absolute; z-index:20001;display:block">
                <div class="mint-msgbox mint-msgboxtwo ">
                    <span class="few">共{{length1}}注</span>
                    <span class="By"><input type="number" placeholder="请输入金币" v-model="qian"> </span>
                    <span class="qingkong" @click="empty">清空</span>
                    <span class="Betting" @click="Chdetails"> 投注</span>
                </div>
            </div>

            <!--     
    
    
    -->
        </div>
        <div class="mint-msgbox-wrapper now1" style="position: absolute; z-index:20001;display:none;top: 0; left: 0;  bottom: 0;  right: 0;  width: 20%;  height: 10%; margin: auto;">
            <div class="mint-msgbox mint-msgboxone now2" style="display:none">
                <div class="mintOne">
                    <div class="title">
                        <img src="../../img/Game/我的投注.png">
                        <span>我得投注</span>
                    </div>
                    <router-link to="/GameCenter/Mybey">
                        <div class="title">
                            <img src="../../img/Game/银币兑金币.png">
                            <span>金币兑银币</span>
                        </div>
                    </router-link>
                    <div class="title">
                        <img src="../../img/Game/玩法规则.png">
                        <span>玩法规则</span>
                    </div>
                    <div class="title">
                        <img src="../../img/Game/历史.png">
                        <span>开奖历史</span>
                    </div>
                    <router-link to="/GameCenter/WinningList">
                        <div class="title">
                            <img src="../../img/Game/榜单.png">
                            <span>中奖榜单</span>
                        </div>
                    </router-link>
                </div>
            </div>
            <div class="tanchuang" style="display:none">
                <div class="tanchuang1">
                    下注清单
                    <img src="../../img/Game/下注清单关闭按钮.png" alt="" @click="modal">
                </div>
                <div class="tanchuang2Header">
                    <span class="li1">选项</span>
                    <span class="li1">投注码</span>
                    <span class="li1">赔率</span>
                    <span class="li1">金额</span>
                </div>
                <ul>
                    <li v-for="data in shuzu" :key=data.id>
                        <span class="li2">{{data.name}}</span>
                        <span class="li2">{{data.name1}}</span>
                        <span class="li2">{{data.peilv}}</span>
                        <span class="li2">{{qian}}</span>
                    </li>

                </ul>
                <div class="tanchuangFoot">

                    <span class="imgInput">
                        追
                        <span class="jia" @click="jiaqi"> <img src="../../img/Game/加.png" alt=""></span><input type="number" v-model="duqi">
                        <span class="jian" @click="jianqi"> <img src="../../img/Game/减.png" alt=""></span>
                        <span class="r_left"> 期</span>
                    </span>

                    <span class="heji"> 合计：
                        <span>{{length1*qian*duqi}}</span>
                    </span>
                </div>
                <div class="queding">
                    确定
                </div>
            </div>
        </div>
        <div class="v-modal" style=z-index:2000;display:none @click="modal"></div>
    </div>
</template>
    <script>
import diyiqiu from "../subcomponents/Bjpkshi.vue";
import longhu from "../subcomponents/bjlonghu.vue"
import { Navbar, TabItem } from "mint-ui";

export default {
    data() {
        return {
            left: [
                "冠军",
                "季军",
                "亚军",
                "第四名",
                "第五名",
                "第六名",
                "第七名",
                "第八名",
                "第九名",
                "第十名",
                "龙虎"
            ],
            is: "",
            length1: 0,
            empt: 1,
            qiushu: [],
            qian: null,
            shuzu: [],
            duqi: 1
        };
    },
    created() {},
    mounted() {},
    methods: {
        number1: function(i) {
            this.is = i;
        },
        length: function(value, c) {
            this.length1 += value; //获取投注数量
            //获取单个得赌法得数量 加上详细消息5
                this.qiushu.forEach((item, i) => {
                    if (item[0].name == c[0].name) {
                        this.qiushu.splice(i, 1);
                    }
                });
            
                if(c[0].name1!=999)
                this.qiushu.push(c);
        },
        //////此处改变
        ////////////////////
        empty: function() {
            this.empt -= 1;
            var all = document.querySelectorAll(".redround");
            all.forEach(element => {
                element.style.opacity = "0";
            });
            this.length1 = 0;
        },
        buttom: function() {
            var modal = document.querySelector(".v-modal");
            var now2 = document.querySelector(".now2");
            var now1 = document.querySelector(".now1");
            modal.style.display = "block";
            now2.style.display = "block";
            now1.style.display = "block";
        },
        modal: function() {
            var modal = document.querySelector(".v-modal");
            var now2 = document.querySelector(".now2");
            var now1 = document.querySelector(".now1");
            now1.style.display = "none";
            modal.style.display = "none";
            now2.style.display = "none";
            var tanchuang = document.querySelector(".tanchuang");
            tanchuang.style.display = "block";
            var mintmsgboxtwo = document.querySelector(".mint-msgboxtwo");
            mintmsgboxtwo.style.display = "block";
            var body = document.querySelector("body");
            body.style = "";
        },
        Chdetails: function() {
            var modal = document.querySelector(".v-modal");
            var now1 = document.querySelector(".now1");
            modal.style.display = "block";
            now1.style.display = "block";
            var tanchuang = document.querySelector(".tanchuang");
            tanchuang.style.display = "block";
            this.shuzu = [];
            this.qiushu.forEach(item => {
                item.forEach(it => {
                    this.shuzu.push(it);
                });
            });
            if (this.qian == null) {
                this.qian = 0;
            }
            var mintmsgboxtwo = document.querySelector(".mint-msgboxtwo");
            mintmsgboxtwo.style.display = "none";
            var body = document.querySelector("body");
            body.style.height = "100%";
            body.style.overflow = "hidden";
        },
        jiaqi: function() {
            this.duqi++;
        },
        jianqi: function() {
            this.duqi--;
        },
        xiangqi: function() {
            var Ch = document.querySelector(".Ch");
            if (Ch.style.display == "none") {
                Ch.style.display = "block";
            } else {
                Ch.style.display = "none";
            }
        }
    },
    watch: {
        duqi: function(newvlue) {
            if (newvlue > 99) {
                this.duqi = 99;
            } else if (newvlue < 0) {
                this.duqi = 0;
            }
        }
    },
    components: {
        diyiqiu,
        longhu 
    }
};
</script>
    <style lang="scss" scoped>
.ChCompetition {
    span {
        display: inline-block;
    }
    .m_right5 {
        margin-right: 0.5rem;
    }
    padding-top: 40px;
    padding-bottom: 0.6rem;
    .mui-bar {
        background: #d51313;
        a {
            color: #fff;
        }
        .mint-button::after {
            background: #d51313;
        }
        box-shadow: none;
    }
    .mint-navbar {
        .mint-tab-item.is-selected {
            box-sizing: border-box;
            border-bottom: 0.04rem solid red;
        }
        .mint-tab-item {
            padding: 0.23rem 0;
            .c1 {
                font-size: 0.3rem;
            }
        }
    }
    .Chheader {
        background: url("../../img/Game/椭圆2.png") no-repeat;
        height: 2.08rem;
        background-size: 7.5rem 1.5rem;
        margin-bottom: 0.22rem;
        .Chhome {
            height: 100%;
            width: 90%;
            margin: 0 auto;
            background: #fff;

            padding-top: 0.22rem;
            position: relative;
            .ChhomeOne {
                padding: 0 0.24rem;
                display: flex;
                justify-content: space-between;
                font-size: 0.24rem;
                img {
                    width: 0.86rem;
                    height: 0.86rem;
                    border-radius: 50%;
                }
                span {
                    color: #4f4f4f;
                }
            }
            .ChhomeTwo {
                padding: 0 0.24rem;
                padding: 0 0.24rem;
                font-size: 0.5rem;
                text-align: center;
                position: relative;
                top: -0.3rem;
            }
            .ChhomeThere {
                padding: 0 0.24rem;
                display: flex;
                justify-content: space-between;
                font-size: 0.24rem;
                color: #4f4f4f;
                margin-top: 0.1rem;
                span {
                    font-size: 0.26rem;
                }
                .number {
                    color: #d51313;
                }
                .font {
                    color: #077dff;
                    span {
                        margin-right: 0.2rem;
                    }
                    img {
                        width: 0.223rem;
                        height: 0.12rem;
                    }
                }
            }
        }
    }

    // ///////////
    .category {
        height: 8.8rem;
        .left {
            float: left;
            height: 100%;
            background: #fff;
            width: 2rem;
            .list {
                text-align: center;
                height: 0.8rem;
                line-height: 0.8rem;
                font-size: 0.26rem;
                border-bottom: 1px solid #e0e0e0;
                .redround {
                    display: inline-block;
                    width: 0.08rem;
                    height: 0.08rem;
                    background: #d51313;
                    border-radius: 50%;
                    position: relative;
                    top: 0.4rem;
                    left: 0.1rem;
                    float: left;
                }
            }
            .active {
                background: #e0e0e0;
                color: #d51313;
            }
        }
    }
    //////////////////浮动按钮/////////////////
    .mint-msgbox-wrapper {
        .tanchuang {
            width: 5rem;
            background: #fff;
            border-radius: 5px;
            position: absolute;
            left: -1.7rem;
            top: -2.7rem;
            padding: 0 0.3rem;
            .tanchuang1 {
                padding: 0.3rem 0;
                font-size: 0.34rem;
                text-align: center;
                img {
                    float: right;
                    width: 0.49rem;
                    height: 0.49rem;
                    position: relative;
                    top: -0.1rem;
                }
            }
            .tanchuang2Header {
                padding: 0.3rem 0;
                display: flex;
                justify-content: space-between;
                font-size: 0.3rem;
                span {
                    width: 25%;
                    text-align: center;
                }
            }
            ul {
                margin-top: 0.1rem;
                padding: 0 0 0.3rem 0;
                box-sizing: border-box;
                overflow-y: auto;
                height: 2rem;
                li {
                    padding-bottom: 0.2rem;
                    display: flex;
                    justify-content: space-between;
                    span {
                        width: 25%;
                        text-align: center;
                    }
                    .li1 {
                        font-size: 0.28rem;
                    }
                    .li2 {
                        font-size: 0.24rem;
                    }
                }
            }
            .tanchuangFoot {
                padding: 0.2rem 0;
                border-top: 1px solid #e0e0e0;
                font-size: 0.3rem;
                display: flex;
                justify-content: space-between;
                .imgInput {
                    position: relative;

                    .jia {
                        position: absolute;
                        height: 0.36rem;
                        width: 0.36rem;
                        line-height: 0.6rem;
                        left: 0.5rem;
                        img {
                            height: 0.26rem;
                            width: 0.26rem;
                        }
                    }

                    .jian {
                        position: absolute;
                        height: 0.36rem;
                        width: 0.36rem;
                        left: 1.3rem;

                        img {
                            height: 0.04rem;
                            width: 0.26rem;
                        }
                    }
                    input {
                        width: 1.3rem;
                        height: 0.6rem;
                        padding: 0 0.4rem;
                        box-sizing: border-box;
                    }
                }
            }
            .heji {
                float: right;
                span {
                    color: #d51313;
                    margin-top: 0.05rem;
                }
            }
            .queding {
                padding: 0.2rem;
                text-align: center;
                background: #d51313;
                border-radius: 5px;
                color: #fff;
                margin-bottom: 0.2rem;
            }
        }
        .mint-msgboxone {
            height: 3.1rem;
            width: 5.44rem;
            border-radius: 10px;
            line-height: 2.1rem;
            text-align: center;

            .box {
                .title {
                    font-family: PingFangSC-Regular;
                    font-size: 0.34rem;
                }
                .btn {
                    margin: 0 auto;
                    width: 80%;
                    .btn1 {
                        margin-right: 0.3rem;
                        background: #e0e0ee;
                    }
                }
            }
        }
        .mint-msgboxtwo {
            position: fixed;
            top: 96vh;
            left: 50%;
            height: 0.96rem;
            width: 100%;
            background: #fff;
            line-height: 0.96rem;
            .few {
                position: absolute;
                font-size: 0.28rem;

                left: 0.3rem;
                color: #000;
            }
            .By {
                position: absolute;
                font-size: 0.28rem;
                left: 1.5rem;
                input {
                    width: 2.4rem;
                    height: 0.8rem;
                    font-size: 0.24rem;
                }
            }

            .qingkong {
                position: absolute;
                font-size: 0.28rem;
                left: 4.3rem;
                color: #d51313;
            }
            .Betting {
                position: absolute;
                height: 0.96rem;
                font-size: 0.32rem;
                color: #fff;
                background: #d51313;
                width: 30%;
                text-align: center;
                line-height: 0.96rem;
                right: 0rem;
            }
        }
    }
    /////////////////////////////////
    .mint-msgbox-wrapper {
        .mint-msgboxone {
            height: 3.76rem;
            width: 2.38rem;
            position: fixed;
            top: 2.5rem;
            left: 78%;
            .mintOne {
                .title {
                    display: flex;
                    justify-content: center;
                    border-bottom: 1px solid #e0e0e0;
                    line-height: 0.75rem;
                    height: 0.75rem;
                    span {
                        width: 1.68rem;
                        text-align: center;
                        font-size: 0.28rem;
                        position: relative;
                    }
                    img {
                        width: 0.58rem;
                        height: 0.58rem;
                        position: relative;
                        top: 0.11rem;
                        left: 0.1rem;
                    }
                }
            }
        }
    }
    ////详情页面
    .Ch {
        border-top: 1px solid #e0e0e0;
        margin-top: 0.1rem;
        padding: 0.1rem 0 0.5rem 0;
        background: #fff;
        z-index: 99;
        position: absolute;
        width: 100%;
    }
}
</style>   